<%--

  Basic Form component.

  This is the most basic form

--%>
<%@ page import="com.day.cq.wcm.foundation.forms.ValidationInfo,
                 com.day.cq.wcm.foundation.forms.FormsConstants,
                 com.day.cq.wcm.foundation.forms.FormsHelper,
                 org.apache.sling.api.resource.Resource,
                 org.apache.sling.api.resource.ResourceUtil,
                 org.apache.sling.api.resource.ValueMap,
                 org.apache.sling.scripting.jsp.util.JspSlingHttpServletResponseWrapper"%>
<%
%><%@include file="/apps/avventa/global.jsp"%>
<%--<form method="POST" action="http://localhost:4502/bin/mySearchServlet">--%>
<script type="text/javascript" src="/etc/clientlibs/foundation/jquery.js"></script>
 <script type="text/javascript">
     jQuery(document).ready(function(){
           jQuery('#secondForm').hide();
            jQuery('#thirdForm').hide();
            jQuery('#previous').hide();
            jQuery('#saveForm').hide();
        });
 
     function nextPage(){
         <%--window.alert(document.getElementById('formact').value);--%>
         var formstep = document.getElementById('formact').value;
         if(formstep == "firstForm")
         {
             document.getElementById('formact').value = "secondForm";
             jQuery('#firstForm').hide();
             jQuery('#secondForm').show();
             jQuery('#previous').show();
             jQuery('#pages').html("2/3");
             jQuery('#one').removeClass("selected");
             jQuery('#one').addClass("done");
             jQuery('#two').removeClass("done");
             jQuery('#two').addClass("selected");             
         }
         else if(formstep == "secondForm")
         {
             document.getElementById('formact').value = "thirdForm";
             jQuery('#secondForm').hide();
             jQuery('#thirdForm').show();
             jQuery('#previous').show();
             jQuery('#pages').html("3/3");  
             jQuery('#nextpage').hide();           
             jQuery('#saveForm').show();
             jQuery('#two').removeClass("selected");
             jQuery('#two').addClass("done");
             jQuery('#three').removeClass("done");
             jQuery('#three').addClass("selected");  
         }
     }
     function prevPage(){
         var formstep = document.getElementById('formact').value;
         if(formstep == "secondForm")
         {
             document.getElementById('formact').value = "firstForm";
             jQuery('#secondForm').hide();
             jQuery('#firstForm').show();
             jQuery('#previous').hide();
             jQuery('#nextpage').show();
             jQuery('#pages').html("1/3");
             jQuery('#two').removeClass("selected");
             jQuery('#two').addClass("done");
             jQuery('#one').removeClass("done");
             jQuery('#one').addClass("selected");  
         }
         else if(formstep == "thirdForm")
         {
             document.getElementById('formact').value = "secondForm";
             jQuery('#thirdForm').hide();
             jQuery('#secondForm').show();
             jQuery('#nextpage').show();
             jQuery('#pages').html("2/3");
             jQuery('#saveForm').hide();
             jQuery('#three').removeClass("selected");
             jQuery('#three').addClass("done");
             jQuery('#two').removeClass("done");
             jQuery('#two').addClass("selected");  
         }
     }            
 </script>
<form method="GET" >
<div id="mainForm">
<br>
    <table class="pgStyle1 circle3" cellspacing="0">
    <tbody>
        <tr>
            <td id="one" class="c selected">
                <var>1</var>
            </td>
            <td class="t">
                <b id="pagecircle1">Step 1 of 3</b>
            </td>
            <td id="two" class="c done">
                <var>2</var>
            </td>
            <td class="t">
                <b id="pagecircle2">Step 2 of 3</b>
            </td>
            <td id="three" class="c done">
                <var>3</var>
            </td>
            <td class="t">
                <b id="pagecircle3">Step 3 of 3</b>
            </td>
        </tr>
    </tbody>
</table>    
    <br>
    <input type="hidden" name="formact" id="formact" value="firstForm">
    <div id="firstForm">
        <cq:include path="formPar" resourceType="foundation/components/parsys" />
    </div>  
    <div id="secondForm" >
        <cq:include path="secondformPar" resourceType="foundation/components/parsys" />
    </div> 
    <div id="thirdForm">
        <cq:include path="thirdformPar" resourceType="foundation/components/parsys" />
    </div> 
    <br>
     <div id="buttons">
        <button type="button" id="nextpage" text="nextpage" onclick="return nextPage()">Next Page</button>
        <input id="saveForm" class="btTxt submit" type="button" >
        <button type="button" id="previous" text="submit" onclick="return prevPage()">Previous</button>        
    </div> 
    <div id="pages">
        1/3
    </div> 
 </div>    
</form>